<template>
	<Form class="auth-login-wrap" :ref="validRef" :model="formData" :label-width="0">
		<Tabs v-model="currentLoginMode">
			<TabPane label="账户密码登录" name="password">
				<template v-if="currentLoginMode === 'password'">
					<FormItem prop="mobile" :rules="{required: true, message: '请填写'}">
						<Input v-model="formData.mobile" type="number" placeholder="请输入手机号">
							<Icon slot="prefix" type="md-phone-portrait" />
						</Input>
					</FormItem>

					<FormItem class="password-item" prop="password" :rules="{required: true, message: '请填写'}">
						<Input v-model="formData.password" placeholder="请输入密码" :type="passwordVisible ? 'text' : 'password'" @on-enter="submitHandler">
							<Icon slot="suffix" :type="passwordVisible ? 'ios-eye-outline' : 'ios-eye-off-outline'"
							      @click="passwordVisible = !passwordVisible"/>

							<Icon slot="prefix" type="md-lock"/>
						</Input>
					</FormItem>
				</template>
			</TabPane>
			<TabPane label="验证码登录" name="code">
				<template v-if="currentLoginMode === 'code'">
					<FormItem prop="mobile" :rules="[{required: true, message: '请填写'}, {min: 11, max: 11, message: '请输入正确的手机号'}]">
						<Input v-model="formData.mobile" type="number" placeholder="请输入手机号">
							<Icon slot="prefix" type="md-phone-portrait" />
						</Input>
					</FormItem>

					<FormItem class="send-msg-code-item" prop="code" :rules="{required: true, message: '请填写'}">
						<Input v-model="formData.code" placeholder="请输入验证码" @on-enter="submitHandler">
							<Icon slot="prefix" type="ios-mail" />
						</Input>

						<Button @click="handleSendBeforeVerify" :disabled="timer > 0">{{computedSendCodeBtnText}}</Button>
					</FormItem>
				</template>
			</TabPane>
		</Tabs>

		<FormItem class="button-item">
			<Button type="primary" class="registry" @click="submitHandler">登录账号</Button>

			<div class="text-btn" @click="$jump({name: 'registry'})">没有账号？去注册</div>
		</FormItem>
	</Form>
</template>

<script>
import JBoot, {WebStorage} from "jboot-env";

export default JBoot.form({
	mixins: [require('./auth-base').default],

	data (){
		return {
			submitMethod: 'login',
			currentLoginMode: 'password',
		}
	},

	created() {
		this.$busCollect(
			this.$bus.on('auth.valid-code-img.success', this.handleGetCode)
		);
	},

	methods: {
		handleValidConfirmPassword (rule, value, callback){
			if(!value) return callback(new Error('请填写确认密码'));

			const {password} = this.formData;

			if(password !== value){
				callback(new Error('两次密码输入不一致'));
			}else{
				callback();
			}
		},

		handleSendBeforeVerify (){
			this.$getRef(this.validRef).validateField('mobile', result => {
				if(result) return;

				this.$bus.emit('auth.valid-code-img.open', {type: 'shopLogin', mobile: this.formData.mobile});
			});
		},

		handleGetCode (imgCode){
			this.$apiWithModule('sendCode', {type: 'login', mobile: this.formData.mobile, imgCode})
				.then(response => {
					this.$tips.success('验证码已发送');

					this.startTimer();
				});
		},

		submitSuccessHandler(response) {
			WebStorage.localMode().set('{PROJECT_NAME}-token', response.data.key, 1000 * 60 * 60 * 24 * 365).then(() => {
				this.$jump('/', true);
			});
		}
	}
});
</script>

<style lang="scss" scoped>
::v-deep.auth-login-wrap {
	& > .ivu-tabs > .ivu-tabs-bar{
		border-bottom: none;
		& .ivu-tabs-nav{
			left: 50%;
			transform: translateX(-50%);
		}
	}
	& .ivu-input-suffix, & .ivu-input-prefix{
		& > i{
			line-height: 40px;
			font-size: 20px;
		}
	}
	& .ivu-input-suffix{
		& > i{
			color: #333333;
			margin-right: 5px;
			cursor: pointer;
		}
	}
	& .ivu-input-prefix{
		& > i{

		}

	}
}
</style>
